import React from 'react'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Form, Input, Select, Button } from 'antd';
import moment from 'moment'
import styles from './index.less'


const FormItem = Form.Item;
const Option = Select.Option;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 }
};

@connect(({ chargeCode, loading, login }) => ({
  chargeCode,
  login,
  loading: loading.models.chargeCode,
}))

class Code extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isStatus: true,
    }
  }



  onGetChange = () => {
    this.setState({ isStatus: false })
    // const { getFieldDecorator, getFiledsValue} = this.props.form
    // validateFields(errors => {
    //   if (errors) {
    //     return;
    //   }
    //   const data = getFiledsValue()
    // })
  }

  onEditOk = () => {
    const { validateFields, getFieldsValue } = this.props.form
    const { codeItem } = this.props.chargeCode
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
        id: codeItem.id
      }
      this.props.dispatch({
        type: "chargeCode/updateProceedsConfig",
        payload: data
      })
    })
    this.setState({ isStatus: true })
  }



  render() {
    const { isStatus } = this.state
    const { getFieldDecorator, getFieldsValue } = this.props.form
    const { codeItem } = this.props.chargeCode;
    const { isAdmin } = this.props.login;

    console.log("isAdmin", isAdmin)
    return (
      <div className={styles.code}>
        {/* {isStatus ?
        <ul>
          <li><span>收款方:</span><span>支付宝</span></li>
          <li><span>支付宝收款帐号:</span><span>13667115606</span></li>
          <li><span>客服联系方式:</span><span>027-894454545</span></li>
        </ul>
        : */}
        <div className={styles.form}>
          <Form style={{ width: '300px' }}>
            <FormItem label="收款方" labelCol={{ span: 11 }} wrapperCol={{ span: 13 }}>
              {getFieldDecorator('proceedsType', {
                initialValue: codeItem && codeItem.proceedsType,
                rules: [{ required: true, message: '请选择收款方!' }],
              })(
                <Select style={{ width: '200px' }} disabled={isStatus}
                  onChange={this.handleSelectChange}>
                  <Option value={0}>支付宝</Option>
                  <Option value={1}>微信</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="支付宝收款帐号" labelCol={{ span: 11 }} wrapperCol={{ span: 13 }}>
              {getFieldDecorator('proceedsAccount', {
                initialValue: codeItem && codeItem.proceedsAccount,
                rules: [{ required: true, message: '请输入收款帐号!' }],
              })(
                <Input disabled={isStatus} style={{ width: '200px' }} />
              )}
            </FormItem>
            <FormItem label="客服联系方式" labelCol={{ span: 11 }} wrapperCol={{ span: 13 }}>
              {getFieldDecorator('customerServicePhone', {
                initialValue: codeItem && codeItem.customerServicePhone,
                rules: [{ required: true, message: '请输入客服联系方式!' }],
              })(
                <Input disabled={isStatus} style={{ width: '200px' }} />
              )}
            </FormItem>
          </Form>

        </div>

        <div className={styles.btn}>

          {isAdmin ? <Button type="primary" onClick={isStatus ? this.onGetChange : this.onEditOk}> {isStatus ? '编辑' : '保存'}</Button> : <div></div>}
        </div>
      </div>
    );
  }
};

export default connect(({ vip, login }) => ({ vip, login }))(Form.create()(Code))
